.root {
    @apply relative h-full w-full select-none;
    overflow: hidden;
}

.slider {
    @apply relative h-full transition-opacity duration-150;
    opacity: 0;
}

.slider.show {
    opacity: 1;
}

.thumb {
    @apply inline-block h-full cursor-pointer overflow-hidden;
    width: 125px;
    width: calc(100% / 3);
}

.thumb.selected {
    @apply bg-white;
}

.thumb img {
    height: 85% !important;
}

.album {
    width: 100%;
    height: 100%;
    @apply bg-product-gray-dark;
    box-sizing: content-box;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    height: 125px;
    scrollbar-width: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.album::-webkit-scrollbar {
    display: none;
}

@screen md {
    .thumb:hover {
        transform: scale(1.02);
    }

    .album {
        height: 182px;
    }
    .thumb {
        width: 235px;
    }
}
